<template>
	<view class="text_book_box">
		<view class="tabbar">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" :active-color="'#0000ff'" :in-active-color="'#ffffff'"></uni-segmented-control>
		</view>
		<view class="unit_tab">
			<scroll-view scroll-x="true" class="scroll_view">
				<view :class="['unit_item', unitCurrent === index ? 'unit_item_active' : '']" v-for="(item, index) in units" :key="index" @tap="unitItem(item,index, item.id)">{{ item.libarayName }}</view>
			</scroll-view>
		</view>
		<view class="content">
			<scroll-view scroll-y style="height: 100%;">
				<view style="padding: 20rpx 30rpx;">
					<view class="word_item flex_ac_js" v-for="item in words" :key="item.id">
						<view :class="['item', 'left', current === 0 ? 'cover' : '']">
							<view style="color: #000; font-weight: bold;">{{ item.word }}</view>
							<view style="font-size: 28rpx;margin-top: 6rpx;">{{ item.phonetic }}</view>
						</view>
						<view :class="['item', 'right', current === 2 ? 'cover' : '']">{{ item.annotation }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="btn_box">
			<!-- <view class="btn" @tap="goToPage('/pages/wordDetails/wordDetails?type=' + 'bookStudy' + '&id=' + params.data)">单元学习</view> -->
			<!-- goToPage('/pages/homes/passageReading/passageReading?type=' + 'bookStudy' + '&id=' + params.data) -->
			<view class="btn" @tap="onClick('bookStudy', params.data)">单元学习</view>
		</view>
	</view>
</template>

<script>
	import { userTextWordBook } from '@/api/homes/wordBook/wordBook.js'
	import { listWord } from '@/api/word/word.js'
	
	export default {
		data() {
			return {
				current: 1,
				unitCurrent: 0,
				items: ['遮盖英文', '无遮盖', '遮盖中文'],
				units: [],
				params: {
					page: 1,
					size: 200,
					data: '',
					type:'',
				},
				words: [],
				bookId:'',
				libarayName:'u1',
			}
		},
		onLoad(options) {
			this.getUserTextWordBook(options.id)
			this.bookId = options.id
		},
		methods: {
			onClickItem(e){
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			unitItem(item,index, id) {
				console.log("当前几单元",item);
				this.unitCurrent = index
				// this.params.data = id
				this.params.type = item.libarayName
				this.getWordList()
			},
			goToPage(url) {
				uni.navigateTo({
					url
				})
			},
			onClick(type, id) {
				uni.setStorageSync('words', { type, id })
				this.goToPage('/pages/homes/passageReading/passageReading?bookId='+this.bookId+"&unit="+this.params.type)
			},
			async getUserTextWordBook(id) {
				const { data } = await userTextWordBook(id)
				this.units = data
				console.log("ddddddddddddddddddddddd",data);
				this.params.type =data[0].libarayName
				this.getWordList()
			},
			async getWordList(unit) {
				
				this.params = {
					...this.params,
				}
				this.params.data =this.bookId
				console.log(this.params);
				const { data } = await listWord(this.params)
				uni.setStorageSync('unitParams',this.params)
				this.words = data
			},
		}
	}
</script>

<style lang="scss" scoped>
.text_book_box {
	height: 100vh;
	background: $uni-bg-color-page;
	
	.tabbar {
		height: 132rpx;
		padding: 30rpx;
	}
	
	.unit_tab {
		width: 100%;
		height: 84rpx;
		padding: 10rpx 30rpx 20rpx;
		border-bottom: 2rpx solid #a2b6d3;
		
		.scroll_view {
			width: 100%;
			height: 100%;
			white-space: nowrap;
		}
		
		.unit_item {
			width: 140rpx;
			height: 100%;
			display: inline-block;
			text-align: center;
		}
		
		.unit_item_active {
			color: #0000ff;
			font-weight: bold;
			font-size: 28rpx;
			// position: relative;
			
			// &::after {
			// 	content: '';
			// 	width: 42%;
			// 	height: 6rpx;
			// 	display: block;
			// 	background-color: $uni-color-primary;
			// 	border-radius: 2rpx;
			// 	position: absolute;
			// 	bottom: 0;
			// 	left: 50%;
			// 	transform: translateX(-50%);
			// }
		}
	}

	.content {
		height: calc(100% - 348rpx - env(safe-area-inset-bottom));
		
		.word_item {
			width: 100%;
			height: 150rpx;
			margin-bottom: 12rpx;
			overflow: hidden;
			
			.item {
				height: 100%;
				flex: 1;
				text-align: center;
				padding: 20rpx 30rpx;
				// font-size: 28rpx;
				color: $uni-text-color;
				position: relative;
			}
			
			.left {
				background-color: #ffffff;
				border-radius: 12rpx 0 0 12rpx;
				
				&::after {
					background-color: #f2f2f2fd;
				}
			}
			
			.right {
				background-color: #f2f2f2fd;
				border-radius: 0 12rpx 12rpx 0;
				font-size: 24rpx;
				// display: -webkit-box;
				// -webkit-box-orient: vertical;
				// -webkit-line-clamp: 2;
				// overflow: hidden;
				&::after {
					background-color: #ffffff;
				}
			}
			
			.cover::after {
				content: '';
				display: block;
				width: calc(100% - 40rpx);
				height: calc(100% - 40rpx);
				border-radius: 12rpx;
				position: absolute;
				left: 20rpx;
				top: 20rpx;
			}
		}
	}

	.btn_box {
		width: 100%;
		height: calc(constant(safe-area-inset-bottom) + 132rpx);
		padding: 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 30rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		position: fixed;
		bottom: 0;
		left: 0;
		
		.btn {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			background-color: #0000ff;
			border-radius: 50rpx;
			text-align: center;
			color: $uni-text-color-inverse;
		}
	}
}
</style>
